<template>
  <div class="orderList zy-content">
    <div class="title">
      <span>{{$t('fault.maintenance')}}</span>
      <div class="icon" v-if="checkBtnPermission.workorderAdd">
        <span class="creatBtnright" @click="addOrderClick">
          <span><Icon type="ios-add-circle-outline" color="#187BDB" /></span>
          <span class="rightbtn">{{$t('fault.CreateAWorkOrder')}}</span>
        </span>
      </div>
    </div>
    <Tabs :value="searchParams.status" class="tab" @on-click="onTabs">
      <TabPane :label="label1" name="1"></TabPane>
      <TabPane :label="label2" name="2"></TabPane>
      <TabPane :label="label3" name="3"></TabPane>
      <TabPane :label="label4" name="4"></TabPane>
      <TabPane :label="label5" name="5"></TabPane>
      <TabPane :label="label6" name="6"></TabPane>
      <TabPane :label="label7" name="7"></TabPane>
      <TabPane :label="label8" name="8"></TabPane>
      <TabPane :label="label9" name="9"></TabPane>
      <TabPane :label="label10" name="10"></TabPane>
      <TabPane :label="label11" name="11"></TabPane>
      <TabPane :label="label12" name="12"></TabPane>
    </Tabs>
    <Form :label-width="120" class="search-form">
      <Row>
        <Col :span="4">
         <FormItem :label="`${$t('fault.FunctionalLocation')}:`" >
            <Cascader :data="orgList" v-model="searchParams.orgCode" change-on-select></Cascader>
          </FormItem>
        </Col>
        <Col :span="4">
          <FormItem :label="`${$t('ledger.Equipmentclassification')}:`" >
            <Select v-model="searchParams.categoryId" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item,index) of deviceList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col :span="4">
          <FormItem :label="`${$t('ledger.EquipmentNo')}:`" >
            <Input type="text" v-model="searchParams.deviceNo" :placeholder="`${$t('common.inputInfo')}`"></Input>
          </FormItem>
        </Col>
        <Col :span="10" v-if="searchParams.status==2">
          <FormItem :label="`${$t('ledger.Timenoorder')}:`" >
            <div class="unreciver" v-for="(m, index) in timeList" :key="m.val" @click="handleReciver(m, index)">
              {{m.n}}
              <img src="~images/workorder/unreciver.jpg" v-if="m.checked"/>
            </div>
<!--            <RadioGroup v-model="searchParams.noOrder">-->
<!--              <Radio v-for="m in timeList" :label="m.val" :key="m.val" border>{{m.n}}</Radio>-->
<!--            </RadioGroup>-->
          </FormItem>
        </Col>
        <Col :span="2" align="center">
          <Button type="primary" @click="onSearch" v-if="checkBtnPermission.workorderList">{{$t('common.Query')}}</Button>
        </Col>
      </Row>
    </Form>
    <Row class="Table" :gutter="16">
      <Col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="6" v-for="order in list" :key="order.id">
        <div class="item">
          <div class="topR">
            <img src="~images/workorder/willConfirm.png" v-if="order.statusText == 1 || order.statusText == 4 || order.statusText == 6"/>
            <img src="~images/workorder/back.png" v-if="order.statusText == 2"/>
            <img src="~images/workorder/undispatch.png" v-if="order.statusText == 3"/>
            <img src="~images/workorder/willCheck.png" v-if="order.statusText == 5"/>
<!--            <img src="~images/workorder/confirm.png" v-if="order.statusText == 6"/>-->
            <img src="~images/workorder/willRepair.png" v-if="order.statusText == 7"/>
            <img src="~images/workorder/repair.png" v-if="order.statusText == 8"/>
            <img src="~images/workorder/complate.png" v-if="order.statusText == 9"/>
            <img src="~images/workorder/accept.png" v-if="order.statusText == 10"/>
            <img src="~images/workorder/alCheck.png" v-if="order.statusText == 11"/>
          </div>
          <div class="name">
            <span>{{ order.deviceNo }}</span>
            <span>{{ order.createBy }}</span>
            <div class="name-img">
              <img src="~images/workorder/deal.png" v-if="order.statusText == 5"/>
            </div>
          </div>
          <div style="height: 26px;">
            <Tag color="blue" v-if="order.urgentLevel">{{ order.urgentLevel }}</Tag>
            <Tag color="blue" v-if="order.effected">{{ order.effected }}</Tag>
            <Tag color="blue" v-if="order.flevel">{{ order.flevel }}</Tag>
          </div>
          <div class="details">
            <div class="formItem">
              <div class="label">{{$t('fault.RepairFormNumber')}}：</div>
              <div class="value num" @click="handleWorkNumDetail(order)">{{ order.workorderNo }}</div>
            </div>
            <div class="formItem">
              <div class="label">{{$t('fault.FaultClassification')}}：</div>
              <div class="value">{{ order.faultName }}</div>
            </div>
            <div class="formItem">
              <div class="label">{{$t('fault.FunctionalLocation')}}：</div>
              <div class="value">{{ order.orgName }}</div>
            </div>
            <div class="formItem">
              <div class="label">{{$t('fault.Description')}}：</div>
              <div class="value over-wrapper">{{ order.faultNote }}</div>
            </div>
<!--            <div class="formItem" v-if="order.sapStatus">-->
<!--              <div class="label">备件采购状态：</div>-->
<!--              <div :class="order.sapStatus == '待采购' ? 'red' : order.sapStatus == '采购中' ? 'yellow' : order.sapStatus == '已到货' ? 'green' : 'value'">{{ order.sapStatus }}</div>-->
<!--            </div>-->
            <div class="preview" v-if="order.photos && order.photos.length">
              <Badge :count="order.photos ? order.photos.length : 0">
                <div class="preview-img">
                  <viewer :images="order.photos">
                    <img
                            v-for="(src,index) in order.photos"
                            :src="src"
                            :key="index"
                            style="width:40px;height:40px;overflow: hidden;"
                    >
                  </viewer>
                </div>
              </Badge>
            </div>
          </div>
          <div class="btnF">
            <Button type="error" ghost v-show="searchParams.status==1 && order.statusText ==1 && checkBtnPermission.workorderReject" @click="handleOut(order)" :loading="outLoading"><img src="~images/workorder/return.svg" style="margin-top: 4px;margin-right: 4px;width: 15px;height: 15px;"/>驳回</Button>
            <Button type="primary" ghost v-show="searchParams.status==1 && order.statusText ==1 && checkBtnPermission.workorderConfirm" @click="handleRepair(order)"><img src="~images/workorder/confirmRepair.svg" style="margin-top: 4px;margin-right: 4px;width: 15px;height: 15px;"/>维修申请确认</Button>
            <Button v-show="(searchParams.status==2 || searchParams.status==3) && checkBtnPermission.workorderAllotWorkorder" @click="handleDispath(order)"><img src="~images/workorder/change.svg" style="margin-top: 4px;margin-right: 4px;width: 15px;height: 15px;"/>点击分配</Button>
            <Button type="primary" shape="circle" v-show="(searchParams.status==2 || searchParams.status==3) && checkBtnPermission.workorderTakeWorkorder" @click="handleRecive(order)">接</Button>
<!--            <Button type="primary" shape="circle" v-show="searchParams.status==4 || searchParams.status==5">{{$t('maintenance.Confirmed')}}</Button>-->
          </div>
        </div>
      </Col>
    </Row>
    <div class="pageWrap">
      <Page
        :total="total"
        :page-size="pageSize"
        :page-size-opts="[12,36,60]"
        :current="pageNum"
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"

        show-sizer
        show-total
      />
    </div>
    <!--选择人员-->
<!--    <choose-member-modal ref="chooseMemberModal" @handleRefresh="handleRefresh"/>-->
    <!--选择单个人员-->
    <signle-member-modal ref="signleMemberModal" @handleRefresh="handleRefresh"/>
    <!--详情-->
    <order-detail-modal ref="orderDetailModal"/>
    <!--新增-->
    <order-add-modal
            ref="orderAddModal"
            @handleRefresh="handleRefresh"
            :workorderUpdateTimes="checkBtnPermission.workorderUpdateTimes"
            :workorderSubmitWorkorder="checkBtnPermission.workorderSubmitWorkorder"
            :workorderAttachmentAdd="checkBtnPermission.workorderAttachmentAdd"
            :workorderStart="checkBtnPermission.workorderStart"
            :workorderFinish="checkBtnPermission.workorderFinish"
            :workorderAccept="checkBtnPermission.workorderAccept"
            :workorderReview="checkBtnPermission.workorderReview"
            :workorderExportOutSource="checkBtnPermission.workorderExportOutSource"
    />
    <AddModal ref="addModal" @refresh="handleRefresh"/>
    <Modal :mask-closable="false" v-model="confirmFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/pair.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span>{{$t('common.workorderenters')}}</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="confirmFaultCodeShowF = false"
        >{{$t('common.Cancle')}}</Button
        >
        <Button type="primary" :loading="repairLoading" @click="handleConfirmOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="backFaultCodeShowF" :title="`${$t('fault.ConfiRejected')}`">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <Icon type="ios-alert-outline" size="100" color="#ff0000"/>
<!--          <img width="95px" src="~images/event/pair.png" alt="" />-->
        </Col>
        <Col span="24" class="enableTips">
          <span>{{$t('common.workrejection')}}</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="backFaultCodeShowF = false"
        >{{$t('common.Cancle')}}</Button
        >
        <Button type="primary" :loading="backLoading" @click="handleBackOk">{{$t('maintenance.Confirmed')}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import chooseMemberModal from './modules/chooseMemberModal'
  import orderDetailModal from './modules/orderDetailModal'
  import orderAddModal from './modules/orderAddModal'
  import recursion from '../../../util/recursion'
  import SignleMemberModal from "./modules/signleMemberModal";
  import AddModal from "./modules/addModal";
export default {
  name: 'orderList',
  components: {
    AddModal,
    SignleMemberModal,
    orderDetailModal,
    chooseMemberModal,
    orderAddModal
  },
  data() {
    return {
      backId: '',
      repairId: '',
      total: 0,
      pageNum: 1,
      pageSize: 12,
      labelCount1: 0,
      labelCount2: 0,
      labelCount3: 0,
      labelCount4: 0,
      labelCount5: 0,
      labelCount6: 0,
      labelCount7: 0,
      labelCount8: 0,
      labelCount9: 0,
      labelCount10: 0,
      labelCount11: 0,
      labelCount12: 0,
      label1: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.application')}`),
          h('Badge', {
            props: {
              count: this.labelCount1
            }
          })
        ])
      },
      label2: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.OrderDisplay')}`),
          h('Badge', {
            props: {
              count: this.labelCount2
            }
          })
        ])
      },
      label3: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.Upgrading')}`),
          h('Badge', {
            props: {
              count: this.labelCount3
            }
          })
        ])
      },
      label4: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.FaultConfirm')}`),
          h('Badge', {
            props: {
              count: this.labelCount4
            }
          })
        ])
      },
      label5: (h) => {
        return h('div', [
          h('span', `${this.$t('common.Outsourcing')}`),
          h('Badge', {
            props: {
              count: this.labelCount5
            }
          })
        ])
      },
      label6: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.OutsourcingComfirming')}`),
          h('Badge', {
            props: {
              count: this.labelCount6
            }
          })
        ])
      },
      label7: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.ToBeRepaired')}`),
          h('Badge', {
            props: {
              count: this.labelCount7
            }
          })
        ])
      },
      label8: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.Repairing')}`),
          h('Badge', {
            props: {
              count: this.labelCount8
            }
          })
        ])
      },
      label9: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.Completed')}`),
          h('Badge', {
            props: {
              count: this.labelCount9
            }
          })
        ])
      },
      label10: (h) => {
        return h('div', [
          h('span', `${this.$t('fault.Accepted')}`),
          h('Badge', {
            props: {
              count: this.labelCount10
            }
          })
        ])
      },
      label11: (h) => {
        return h('div', [
          h('span', `${this.$t('common.review')}`),
          h('Badge', {
            props: {
              count: this.labelCount11
            }
          })
        ])
      },
      label12: (h) => {
        return h('div', [
          h('span', `${this.$t('common.rejected')}`),
          h('Badge', {
            props: {
              count: this.labelCount12
            }
          })
        ])
      },
      confirmFaultCodeShowF: false,
      repairLoading: false,
      outLoading: false,
      backFaultCodeShowF: false,
      backLoading: false,
      searchParams: {
        status: 1
      },
      checkBtnPermission: {},
      orgList: [],
      deviceList: [],
      locationList: [{ n: "全部", val: "" }],
      typeList: [{ n: "全部", val: "" }],
      timeList: [
        { n: '<30分钟', val: 1, checked: false },
        { n: '<1小时', val: 2, checked: false },
        { n: '>=1小时', val: 3, checked: false },
      ],
      time: [],
      list: [{}],
    }
  },
  created() {
    this.getOrgList()
    this.getDeviceList()
    this.getList()
    this.getCountsList()
  },
  mounted() {
    let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
    for(let item of itemList){
      if(item.code=="workorderList"){
        this.checkBtnPermission.workorderList = true
      }
      if(item.code=="workorderConfirm"){
        this.checkBtnPermission.workorderConfirm = true
      }
      if(item.code=="workorderReject"){
        this.checkBtnPermission.workorderReject = true
      }
      if(item.code=="workorderAllotWorkorder"){
        this.checkBtnPermission.workorderAllotWorkorder = true
      }
      if(item.code=="workorderTakeWorkorder"){
        this.checkBtnPermission.workorderTakeWorkorder = true
      }
      if(item.code=="workorderQueryById"){
        this.checkBtnPermission.workorderQueryById = true
      }
      if(item.code=="workorderUpdateTimes"){
        this.checkBtnPermission.workorderUpdateTimes = true
      }
      if(item.code=="workorderSubmitWorkorder"){
        this.checkBtnPermission.workorderSubmitWorkorder = true
      }
      if(item.code=="workorderAttachmentAdd"){
        this.checkBtnPermission.workorderAttachmentAdd = true
      }
      if(item.code=="workorderStart"){
        this.checkBtnPermission.workorderStart = true
      }
      if(item.code=="workorderFinish"){
        this.checkBtnPermission.workorderFinish = true
      }
      if(item.code=="workorderAccept"){
        this.checkBtnPermission.workorderAccept = true
      }
      if(item.code=="workorderReview"){
        this.checkBtnPermission.workorderReview = true
      }
      if(item.code=="workorderExportOutSource") {
        this.checkBtnPermission.workorderExportOutSource = true
      }
      if(item.code=="workorderAdd") {
        this.checkBtnPermission.workorderAdd = true
      }
    }
  },
  methods: {
    /**************基础数据**********************/
    getDeviceList() {
      this.axios({
        method: 'get',
        url: '/dms/dmsCategory/getSelectList',
        params: {}
      }).then(res => {
        if(res.code === 200){
          this.deviceList = res.data
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/user/userOrgByToken',
        params: {}
      }).then(res => {
        if(res.code === 200){
          const obj ={
            label: 'name',
            value: 'code',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
          console.log(this.orgList)
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    getCountsList() {
      let noOrder = ''
      this.timeList.forEach(item => {
        if (item.checked) {
          noOrder = `${item.val},${noOrder}`
        }
      })
      let params = {}
      this.searchParams.noOrder = noOrder ? noOrder.substr(0,noOrder.length-1) : ''
      for (let key in this.searchParams) {
        if (key === 'orgCode' && this.searchParams['orgCode']) {
          const arr = this.searchParams[key]
          const { length, last=length-1 } = arr
          this.$set(params, key, arr[last])
        }else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      console.log(this.searchParams)
      this.axios({
        method: 'post',
        url: '/workorder/workorder/listNum',
        data: params
      }).then(res => {
        if(res.code === 200){
          let arr = res.data
          arr.forEach((item) => {
            if(item.status === 1) {
              this.labelCount1 = Number(item.num)
            }else if (item.status === 2) {
              this.labelCount2 = Number(item.num)
            }else if (item.status === 3) {
              this.labelCount3 = Number(item.num)
            }else if (item.status === 4) {
              this.labelCount4 = Number(item.num)
            }else if (item.status === 5) {
              this.labelCount5 = Number(item.num)
            }else if (item.status === 6) {
              this.labelCount6 = Number(item.num)
            }else if (item.status === 7) {
              this.labelCount7 = Number(item.num)
            }else if (item.status === 8) {
              this.labelCount8 = Number(item.num)
            }else if (item.status === 9) {
              this.labelCount9 = Number(item.num)
            }else if (item.status === 10) {
              this.labelCount10 = Number(item.num)
            }else if (item.status === 11) {
              this.labelCount11 = Number(item.num)
            }else {
              this.labelCount12 = Number(item.num)
            }
          })
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    handleReciver(item, index) {
      console.log(item)
      this.timeList[index].checked = !item.checked
    },
    //新增工单
    addOrderClick() {
      this.$refs.addModal.show()
    },
    //刷新
    handleRefresh() {
      this.getList()
      this.getCountsList()
    },
    //分配
    handleDispath(order) {
      this.$refs.signleMemberModal.show(order)
    },
    //详情
    handleWorkNumDetail(order) {
      if (this.checkBtnPermission.workorderQueryById) {
        if (order.statusText == 1 || order.statusText == 2 || order.statusText == 3 || order.statusText == 11 || order.statusText == 12) {
          this.$refs.orderDetailModal.show(order)
        }else {
          this.$refs.orderAddModal.show(order)
        }
      }


    },
    //接
    handleRecive(order) {
      // this.$refs.orderDetailModal.show(order)
      console.log(order)
      let params = {
        id: order.id,
        // userIds: window.localStorage.getItem('ziyunFactoryUserId')
      }
      this.axios({
        method: 'post',
        url: '/workorder/workorder/takeWorkorder',
        data: params
      }).then(res => {
        if (res.code === 200) {
          this.$Message.success(({content:`${ this.$t('common.OrderSuce') }`,duration:6,closable:true}))
        }else {
          this.$Message.warning(({content:res.msg,duration:6,closable:true}))
        }
      }).finally(() => {
        this.$refs.orderAddModal.show(order,'accpect')
      })
    },
    handleConfirmOk() {
      this.repairLoading = true
      this.axios({
        method: 'post',
        url: '/workorder/workorder/confirm',
        data: {
          id: this.repairId,
          // status: 1
        }
      }).then(res => {
        if(res.code === 200){
          this.$Message.success(({content:'维修确认成功！',duration:6,closable:true}));
          this.getList()
          this.getCountsList()
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.repairLoading = false
        this.confirmFaultCodeShowF = false
      })
    },
    //维修
    handleRepair(order) {
      this.confirmFaultCodeShowF = true
      this.repairId = order.id
    },
    handleBackOk() {
      this.backLoading = true
      this.axios({
        method: 'post',
        url: '/workorder/workorder/reject',
        params: {
          id: this.backId,
        }
      }).then(res => {
        if(res.code === 200){
          this.$Message.success(({content:'驳回成功！',duration:6,closable:true}));
          this.getList()
          this.getCountsList()
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      }).finally(() => {
        this.backLoading = false
        this.backFaultCodeShowF = false
      })
    },
    //驳回
    handleOut(order) {
      this.backFaultCodeShowF = true
      this.backId = order.id
    },
    changePageSize(val) {
      this.pageSize = val
      this.getList()
    },
    changePageNum(val) {
      this.pageNum = val
      this.getList()
    },
    onSearch() {
      this.pageNum = 1;
      this.getList()
      this.getCountsList()
    },
    getList() {
      let noOrder = ''
      this.timeList.forEach(item => {
        if (item.checked) {
          noOrder = `${item.val},${noOrder}`
        }
      })
      this.searchParams.noOrder = noOrder ? noOrder.substr(0,noOrder.length-1) : ''
      let params = {
        pageNo:this.pageNum,
        pageSize:this.pageSize,
      };
      for (let key in this.searchParams) {
        if (key === 'orgCode' && this.searchParams['orgCode']) {
          const arr = this.searchParams[key]
          const { length, last=length-1 } = arr
          this.$set(params, key, arr[last])
        }else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      console.log(this.searchParams)
      this.axios({
        method: 'post',
        url: '/workorder/workorder/list',
        data: params
      }).then(res => {
        
        if(res.code === 200){
          this.list = res.data.list.map(item => {
            return {
              ...item,
              photos: item.pics ? item.pics.split(',') : []
            }
          })
          this.total = res.data.total
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    onTabs(val) {
      this.searchParams.status = val
      this.timeList = this.timeList.map(item => {
        return {
          ...item,
          checked: false
        }
      })
      // this.searchParams = { location: 0, type: 0 }
      this.onSearch()
    },
  },
}
</script>

<style lang="scss" scoped>
.orderList {
  background: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    .icon {
      display: flex;
      .creatBtnright {
        display: flex;
        align-items: center;
        font-size: 16px;
        i {
          font-size: 36px;
        }
      }
    }
  }
  .Table {
    overflow: auto;
    height: calc(100vh - 382px);
    .item {
      margin-top: 10px;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      padding: 10px;
      line-height: 24px;
      height: 344px;
      .topR {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 60px;
        height: 50px;
        img {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
      }
      .name {
        position: relative;
        height: 40px;
        line-height: 40px;
        span {
          display: inline-block;
          /*height: 40px;*/
          /*line-height: 40px;*/
          padding:0 3px;
          &:nth-child(1) {
            color: #333;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 16px;
            /*line-height: 40px;*/
          }
          &:nth-child(2) {
            color: #666;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-size: 12px;
            /*line-height: 40px;*/
          }
        }
        .name-img {
          width: 69px;
          height: 26px;
          display: inline-block;
          position: absolute;
          left: 190px;
          top:10px;
          img {
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
        }
      }
      .details {
        height: 180px;
        padding-left: 10px;
        background-color: #f8fcff;
        margin: 12px auto;
        position: relative;
        .formItem {
          display: flex;
          .label {
            width: 90px;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
            color: #888888;
            line-height: 30px;
          }
          .value {
            width: calc(100% - 120px);
            color: #333;
            padding: 0 3px;
            font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
            line-height: 30px;
          }
          .num {
            color: #187bdb;
            text-decoration: underline;
            cursor: pointer;
          }
        }
        .img {
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 36px;
        }
        .preview {
          position: absolute;
          right: 0;
          bottom:10px;
          width: 40px;
          height: 40px;
          background: #eee;
          .preview-img {
            width: 40px;
            height: 40px;
            overflow: hidden;
          }
        }
      }
      .ivu-tag-blue {
        border-color: #f1f7fd;
        border-radius: 24px;
        line-height: 26px;
        font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #187BDE!important;
      }
      /deep/.ivu-tag-blue .ivu-tag-text {
        color: #187BDE!important;
        padding: 3px 3px;
      }
      .btnF {
        text-align: right;
        line-height: 40px;
        button {
          margin-left: 5px;
        }
      }
    }
  }
}
.over-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
::v-deep .tab {
  background-color: #fff;
  height: calc(100% - 100px);
  .ivu-tabs-bar {
    padding-left: 30px;
  }
  .ivu-tabs-tab {
    font-size: 18px;
  }
}
  .unreciver {
    position: relative;
    display: inline-block;
    width: 69px;
    height: 35px;
    margin-right: 10px;
    background: inherit;
    background-color: rgba(242, 242, 242, 1);
    border: none;
    border-radius: 5px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    letter-spacing: normal;
    color: #333333;
    vertical-align: none;
    text-align: center;
    line-height: 35px;
    text-transform: none;
    img {
      position: absolute;
      width: 12px;
      height: 12px;
      top: 23px;
      right: 1px;
    }
  }
  .red {
      width: calc(100% - 120px);
      color: red;
      padding: 0 3px;
      font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      line-height: 30px;
  }
  .green {
      width: calc(100% - 120px);
      color: #31B404;
      padding: 0 3px;
      font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      line-height: 30px;
  }
  .yellow
  {
      width: calc(100% - 120px);
      color: #FFBF00;
      padding: 0 3px;
      font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      line-height: 30px;

  }
</style>
